@import '../../../app/mixins.css';

.wrapper {
  border-radius: inherit;
  background-color: var(--color-white-smoke);
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;

  & > li {
    @mixin contentNormal;

    align-items: center;
    border-right: 1px solid var(--color-platinum);
    color: var(--color-slate-gray);
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin-bottom: -2px;
    padding: 14px 20px;
    position: relative;

    &:last-child {
      border-right: 0 none;
    }

    &.active {
      background: var(--color-white);
      border-bottom: 1px solid var(--color-white);
      color: var(--color-ultramarine-blue);
    }
  }

  &:first-child {
    margin-left: -20px;

    & > li:first-child {
      border-top-left-radius: var(--border-radius-box);
    }

    & > li.active:last-child {
      border-right: 1px solid var(--color-platinum);
    }
  }

  &:last-child {
    margin-right: -20px;
  }

  &:not(:first-child) {
    & > li.active:first-child {
      border-left: 1px solid var(--color-platinum);
    }
  }
}
